---
title: 별칭
description: Astro의 별칭을 소개합니다.
i18nReady: true
---

**별칭**은 가져오기에 대한 바로가기를 만드는 방법입니다.

별칭은 디렉터리 또는 상대 경로에서 가져오는 경우가 많은 코드베이스의 개발 경험을 개선하는 데 도움이 됩니다.

```astro title="src/pages/about/company.astro" del="../../components" del="../../assets"
---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---
```

이 예에서 개발자는 `src/pages/about/company.astro`, `src/components/controls/Button.astro`, `src/assets/logo.png` 세 파일 간의 트리 관계를 이해해야 합니다. 그리고 `company.astro` 파일을 옮기려면 가져오는 경로도 함께 업데이트해야 합니다.

`tsconfig.json` 또는 `jsconfig.json` 파일에서 가져오기 별칭을 추가할 수 있습니다.

```json title="tsconfig.json" ins={5-6}
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@assets/*": ["src/assets/*"]
    }
  }
}
```

:::note
별칭 경로를 확인할 수 있도록 `compilerOptions.baseUrl`이 설정되어 있는지 확인하세요.
:::

이 구성이 변경되면 개발 서버가 자동으로 다시 시작됩니다. 이제 프로젝트의 어느 곳에서나 별칭을 사용하여 가져올 수 있습니다.

```astro title="src/pages/about/company.astro" ins="@components" ins="@assets"
---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---
```

이러한 별칭은 [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) 및 기타 편집기에 자동으로 통합됩니다.
